<script setup lang="tsx">
import { computed, h, ref, useTemplateRef, watch } from 'vue';
import { ElButton, ElInput } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import FormBuilser from '@/components/form/FormBuilser.vue';

const formData = ref({
  title: undefined,
  name: undefined,
  age: undefined,
  sex: undefined,
  sex1: undefined,
  sex2: undefined,
  xdate: undefined,
  xdate1: undefined,
  xdate2: undefined,
  text: undefined,
  sex4: 10,
  sex6: undefined,
  sex5: 3,
  sex12: true,
  img: [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  ],
  agexz: 0,
  stepsdata: 0
});

const formItems = computed(() => [
  {
    label: '标题',
    key: 'title',
    type: () => h('span', {}, '标题type'),
    placeholder: '请输入标题',
    span: 8
  },
  {
    label: '图标',
    key: 'icon',
    type: () =>
      h(ElInput, null, {
        append: () => h(ElButton, { onClick: () => console.log('点击按钮', formData.value) }, () => '选择图标')
      }),
    placeholder: '请输入标题',
    span: 8
  },

  {
    label: '姓名',
    key: 'name',
    type: 'input',
    placeholder: '请输入姓名',
    span: 8
  },
  {
    label: '文本域',
    key: 'text',
    type: 'input',
    brand: 'textarea',
    placeholder: '请输入姓名',
    hidden: formData.value.name === 'xzd',
    span: 8
  },
  {
    label: '日期',
    key: 'xdate',
    type: 'datePicker',
    brand: 'datetime',
    placeholder: '请选择日期',
    valueFormat: 'YYYY-MM-DD h:m:s',
    span: 8,
    style: 'width: 100%;'
  },
  {
    label: '时间选择器',
    key: 'xdate1',
    type: 'timePicker',
    placeholder: '请选择时间',
    span: 8,
    style: 'width: 100%;'
  },
  {
    label: '时间选择',
    key: 'xdate2',
    type: 'timeSelect',
    brand: 'datetime',
    placeholder: '请选择时间',
    span: 8,
    style: 'width: 100%;'
  },
  {
    label: '性别',
    key: 'sex',
    type: 'select',
    a: 'b',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' }
    ],
    span: 8
  },
  {
    label: '年龄',
    key: 'agexz',
    type: 'input',
    brand: 'number',
    placeholder: '请输入年龄',
    span: 8
  },
  {
    label: '年龄',
    key: 'age',
    type: 'number',
    placeholder: '请输入年龄',
    style: 'width: 100%;',
    span: 8,
    onClick() {
      console.log('年龄点击事件');
    },
    onInput() {
      console.log('年龄输入事件');
    }
  },
  {
    label: '单选框',
    key: 'sex2',
    type: 'radio',
    options: [
      { label: '1', value: 1, disabled: true },
      { label: '2', value: 2 }
    ],
    span: 8
  },
  {
    label: '多选框',
    key: 'sex3',
    type: 'checked',
    options: [
      { label: '1', value: '1' },
      { label: '2', value: '2', disabled: true }
    ],
    span: 8
  },
  {
    label: '滑块',
    key: 'age6',
    type: 'slider',
    span: 8
  },
  {
    label: '评分',
    key: 'sex5',
    type: 'rate',
    span: 8
  },
  {
    label: '开关',
    key: 'sex12',
    type: 'switch',
    span: 8
  },
  {
    label: '树状选择',
    key: 'tree',
    type: 'treeSelect',
    span: 8,
    data: [
      {
        label: '节点1',
        value: '0-0',
        children: [
          {
            label: '节点1-1',
            value: '0-0-0',
            children: [
              {
                label: '节点1-1-1',
                value: '0-0-0-0'
              },
              {
                label: '节点1-1-2',
                value: '0-0-0-1'
              }
            ]
          },
          {
            label: '节点1-2',
            value: '0-0-1'
          }
        ]
      },
      {
        label: '节点2',
        value: '0-1'
      }
    ]
  },
  {
    label: '上传',
    key: 'img',
    type: 'upload',
    span: 16
  }
]);

const visb = ref(0);
setTimeout(() => {
  console.log(formItems.value[15]);
  formItems.value[15].data = [
    {
      label: '节点2',
      value: '0-1'
    }
  ];
  visb.value = 1;
}, 8000);

const rules: FormRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'change' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
  ]
};

watch(formData.value, newVal => console.log('formData ===>', newVal));

const formRef = useTemplateRef<FormInstance>('formRef');
const onSubmmit = async () => {
  if (!(await formRef.value?.validate())) return;
  console.log(formRef.value);
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-112px overflow-hidden lt-sm:overflow-auto">
    <ElCard class="sm:flex-1-hidden card-wrapper">
      <template #header>
        <div class="flex items-center justify-between">
          <p>表单封装</p>
          <ElButton plain type="primary" @click="onSubmmit">
            <template #icon>
              <icon-file-icons:microsoft-excel class="text-icon" />
            </template>
            提交
          </ElButton>
        </div>
      </template>
      <div class="h-[calc(100%-50px)]">
        <FormBuilser ref="formRef" :key="visb" v-model="formData" :form-items="formItems" :rules="rules"></FormBuilser>
      </div>
    </ElCard>
  </div>
</template>
